import React, { memo } from 'react'

import { getSizeImage } from '@/utils/format-utils'
import { hotAnchor } from '@/common/local-data'

import DThemeHeaderSmall from "@/components/theme-header-small";
import { HotAnchorWrapper } from "./style";

export default memo(function DHotAnchor() {
  return (
    <HotAnchorWrapper>
      <DThemeHeaderSmall title="热门主播" />
      <div className="anchor-list">
        {
          hotAnchor.map(item => {
            return (
              <div key={item.name} className="item">
                <a href={item.url} className="image">
                  <img src={getSizeImage(item.picUrl, 40)} alt="" />
                </a>
                <div className="info">
                    <div className="name">{item.name}</div>
                  <div className="position text-nowrap">{item.position}</div>
                </div>
              </div>
            )
          })
        }
      </div>
    </HotAnchorWrapper>
  )
})
